<template>
  <div class="container">
    <div class="boxItem1">
      <div class="title1">{{data.nameOne}}</div>
      <div class="name1">{{data.valueOne}}</div>
    </div>
    <div class="boxItem2">
      <div class="title1">{{data.nameTwo}}</div>
      <div class="name1">{{data.valueTwo}}</div>
    </div>
    <div class="boxItem3">
      <div class="title1">{{data.nameThree}}</div>
      <div class="name1">{{data.valueThree}}</div>
    </div>
    <div class="boxItem4">
      <div class="title1">{{data.nameFour}}</div>
      <div class="name1">{{data.valueFour}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data:{},
        drawTiming: null
      }
    },
    components: {},
    props: {
      configCode: {
        type: String,
        default: ''
      },
      index: {
        type: Number,
        default: 0
      }
    },
    mounted() {
      this.drawTimingFn()
    },
    beforeDestroy() {
      clearInterval(this.drawTiming);
      this.drawTiming = null
    },
    methods: {
      drawTimingFn () {
        this.queryData();
        this.drawTiming = setInterval(() => {
          this.queryData();
        }, 14000);
      },
      queryData() {
        this.$http.get("/visShow/queryData", {
          params: {
            configCode: this.configCode,
            index: this.index
          }
        }).then(res => {
          const {data} = res
          console.log(data, 'fourInfo.vue')
          if (data.status == 200) {
            this.data = data.object
            // this.$set(this.config, "header", data.object.header)
            // this.$set(this.config, "data", data.object.data)
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 10px;


    .boxItem1 {
      display: flex;
      width: 170px;
      height: 48%;
      background-image: url("../../assets/img/Frame 299@2x.png");
      background-size: 100% 100%;
      position: relative;

      .title1 {
        position: absolute;
        top: 10px;
        left: 15px;
        height: 15px;
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 15px;
      }

      .name1 {
        position: absolute;
        bottom: 30px;
        right: 10px;
        height: 27px;
        font-size: 22px;
        font-family: Impact, Impact-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 27px;
      }
    }

    .boxItem2 {
      display: flex;
      width: 170px;
      height: 48%;
      background-image: url("../../assets/img/Frame 300@2x.png");
      background-size: 100% 100%;
      position: relative;

      .title1 {
        position: absolute;
        top: 10px;
        left: 15px;
        height: 15px;
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 15px;
      }

      .name1 {
        position: absolute;
        bottom: 30px;
        right: 10px;
        height: 27px;
        font-size: 22px;
        font-family: Impact, Impact-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 27px;
      }
    }

    .boxItem3 {
      display: flex;
      width: 170px;
      height: 48%;
      background-image: url("../../assets/img/Frame 301@2x.png");
      background-size: 100% 100%;
      position: relative;

      .title1 {
        position: absolute;
        top: 10px;
        left: 15px;
        height: 15px;
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 15px;
      }

      .name1 {
        position: absolute;
        bottom: 30px;
        right: 10px;
        height: 27px;
        font-size: 22px;
        font-family: Impact, Impact-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 27px;
      }
    }

    .boxItem4 {
      display: flex;
      width: 170px;
      height: 48%;
      background-image: url("../../assets/img/Frame 302@2x.png");
      background-size: 100% 100%;
      position: relative;

      .title1 {
        position: absolute;
        top: 10px;
        left: 15px;
        height: 15px;
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 15px;
      }

      .name1 {
        position: absolute;
        bottom: 30px;
        right: 10px;
        height: 27px;
        font-size: 22px;
        font-family: Impact, Impact-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 27px;
      }
    }
  }
</style>
